<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
	media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<fieldset class="table-search-fieldset">
				<legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label  class="layui-form-label">关键词</label>
								<div class="layui-input-inline">
									<input id="keyword" type="text" name="username" autocomplete="off"
										class="layui-input">
								</div>
							</div>

							<div class="layui-inline">
								<button id="serachBtn" type="button"
									class="layui-btn layui-btn-primary" lay-submit
									lay-filter="data-search-btn">
									<i class="layui-icon"></i> 搜 索
								</button>
								<button id="addBtn" type="button"
									class="layui-btn layui-btn-normal">新增管理员</button>
							</div>
					</form>
				</div>
			</fieldset>



			<table class="layui-hide" id="currentTableId"
				lay-filter="currentTableFilter"></table>

			<script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>



			<!-- 定义新增时弹出窗口的模板 -->
			<script type="text/html" id="attendantForm">

            <form class="layui-form" action="/emp/save" lay-filter="attendantForm">

<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">

<input id="id" type="hidden"  name="id" >

  <input id="username" type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
  <input id="password" type="password" name="password" class="layui-input demo-phone" >
</div>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
    <input  type="radio" name="sex" value="男" title="男" checked="">
    <input  type="radio" name="sex" value="女" title="女">
</div>
</div>


<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">生日</label>
<div class="layui-input-inline">
<input id="birthday" type="text" name="birthday"   class="layui-input demo-phone" placeholder="yyyy-MM-dd">
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">月薪</label>
<div class="layui-input-inline">
<input id="cash" type="number" name="cash"  autocomplete="off" class="layui-input demo-phone">
</div>
</div>
</div>


<div class="layui-form-item">
    <div class="layui-input-block">
      <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</script>
		</div>
	</div>
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table', 'layer', 'laydate' ], function() {
			var $ = layui.jquery, form = layui.form, table = layui.table;
			layer = layui.layer;
			laydate = layui.laydate;

			$("#serachBtn").on("click", function() {
				table.render({
					elem : '#currentTableId',
					url : '/attendantcontroller?action=list',//请求放在表格中的数据
					where:{keyword:$("#keyword").val()},
					toolbar : '#toolbarDemo',
					defaultToolbar : [ 'filter', 'exports', 'print', {
						title : '提示',
						layEvent : 'LAYTABLE_TIPS',
						icon : 'layui-icon-tips'
					} ],
					cols : [ [ {
						type : "checkbox",
						width : 50
					}, {
						field : 'id',
						width : 80,
						title : 'ID',
						sort : true
					}, {
						field : 'username',
						width : 80,
						title : '用户名'
					}, {
						field : 'sex',
						width : 80,
						title : '性别'
					}, {
						field : 'birthday',
						width : 180,
						title : '生日'
					}, {
						field : 'cash',
						width : 80,
						title : '月薪'
					}, {
						field : 'password',
						width : 90,
						title : '密码'
					}, {
						title : '操作',
						minWidth : 150,
						toolbar : '#currentTableBar',
						align : "center"
					} ] ],
					limits : [ 5,10, 15 ],
					limit : 15,
					page : true,
					skin : 'line'
				});
				
				
			}).click();

			

			//给新增按钮绑定事件
			$("#addBtn").on("click",function() {
							layer.open({
								type : 1,
								title : "新增管理员",
								area : [ "400px", "500px" ],
								content : $("#attendantForm").html(),
							});
							laydate.render({
								elem : '#birthday' //指定元素
							});
							

							
							//渲染表单
							form.render();
						

					});
			
			//保存按钮绑定事件
			$("body").on("click","#saveBtn", function() {
				//打包form表单中的数据
				var data = form.val("attendantForm");
				if(data.username==null || data.username==""){
					layer.msg("用户名不能为空!");
					return false;
				}
				//发送请求把数据推送给后台
				data.action="save";
				$.post("/attendantcontroller", data, function(result) {
					if(result.code==0){
						//关闭窗口
						layer.closeAll();
						//点击搜索
						$("#serachBtn").click();
					}else{
						layer.msg(result.msg);
					}
					
				});
			});	

			//给操作框绑定事件
			table.on('tool(currentTableFilter)', function(obj) {
				//如果点的时编辑按钮
				if (obj.event === 'edit') {
					$.get("/attendantcontroller?action=select&id="+obj.data.id,function(m){
						if(m.code==0){
						//弹窗
						layer.open({
							type : 1,
							title : "修改管理员信息",
							area : [ "400px", "500px" ],
							content : $("#attendantForm").html()
						});
						
						laydate.render({
							elem : '#birthday' //指定元素
						});
						
						form.render();
						form.val("attendantForm", m.data);	
						}
						else{
							layer.msg(m.msg);
						}	
					});
					
				} else if (obj.event === 'delete') {//点删除按钮时
					layer.confirm('确认删除该员工吗？', function(index) {
						//发送请求，通知后台删除数据
						$.post("/attendantcontroller", {id : obj.data.id,action:"delete"}, function() {
							//关闭窗口
							layer.closeAll();
							//重新渲染表格
							$("#serachBtn").click();
						});
					});
				}
			});

		});
	</script>

</body>
</html>